import React, {useCallback, useEffect, useState} from 'react'
import "./index.css"
import {Form, Button, Input, Icon, Checkbox, message} from "antd";
import {getToken} from "../../api/request";
import base64url from "base64url";
import backImg from '../../asserts/login-image.png'

function Login(props) {
  const {form} = props
  const {getFieldDecorator} = form
  // const [logined, setLogined] = useState(false)
  const handleSubmit = e => {
    e.preventDefault();
    form.validateFields((err, values) => {
      if (!err) {

        console.log('Received values of form: ', values);
        // if (values.remember) {
        localStorage.setItem("remember", values.remember)
        // }
        getToken(values.username, values.password).then(res => {
          res?.data?.access && localStorage.setItem("token", res?.data?.access)
          const userInfo = localStorage.getItem("token").split(".")[1]
          // console.log('userinfo', window.btoa(userInfo));
          // const base64 = new window.Base64()
          const userInfoStr = base64url.decode(userInfo)
          console.log('userinfo', userInfoStr);
          localStorage.setItem("userInfo", userInfoStr)
          // const userInfoObj = JSON.parse(userInfoStr)
          // console.log(JSON.parse(userInfoStr))
          // console.log(userInfoObj)
          // localStorage.setItem("userId", )
          props.history.push(`/HomePage`);
        }).catch(error => {
          message.info("用户名或密码错误!")
          // console.log(123,error);
        })
      }
    });
  };

  useEffect(() => {
    const boolRemember = JSON.parse(localStorage.getItem("remember"))
    props.form.setFieldsValue({
      remember: boolRemember
    })
    if (boolRemember && localStorage.getItem("token")) {
      props.history.push(`/HomePage`);
    }
  }, [])

  return (
    <div className="login-container" style={{backgroundImage: `url(${backImg})`}}>
      <div className="form-wrapper">
        <div className="title">
          广东省信宜732台音视频内容监测系统
        </div>
        <Form onSubmit={handleSubmit} style={{width: '300px', marginTop: '50px'}}>
          <Form.Item>
            {getFieldDecorator('username', {
              rules: [{required: true, message: '请输入用户名!'}],
            })(
              <Input
                prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                placeholder="用户名"
              />,
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('password', {
              rules: [{required: true, message: '请输入密码!'}],
            })(
              <Input
                prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                type="password"
                placeholder="密码"
              />,
            )}
          </Form.Item>
          <Form.Item>
            {
              getFieldDecorator('remember', {
                valuePropName: 'checked'
              })(
                <Checkbox><span style={{color: "white"}}>记住我</span></Checkbox>
              )
            }

          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
    /*<div style={{
      width: '100vw',
      height: '100vh',
      backgroundImage: `url(${loginImage})`,
      backgroundSize: `cover`,
      backgroundRepeat: 'no-repeat',
      overflow: 'hidden'
    }}>*/

    // </div>
  )
}

const WrappedNormalLoginForm = Form.create({name: 'normal_login'})(Login);
export default WrappedNormalLoginForm
